<template>
  <div class="echarts-m" id="poa-echarts" style="height:100%;margin-left: -15px;">

  </div>
</template>

<!--金额占比-->
<script setup lang="ts">
import {
  onMounted, watch, onUnmounted, nextTick
} from "vue";
import * as echarts from 'echarts';

const props = defineProps({
  poaData: {
    type: Object,
    required: true
  }
});

let myChart = null;

// 窗口大小变化处理函数
const handleResize = () => {
  if (myChart) {
    myChart.resize();
  }
};

const renderChart = () => {
  nextTick(() => {
    const chartDom = document.getElementById('poa-echarts');
    if (!chartDom) return;

    if (!myChart) {
      myChart = echarts.init(chartDom);
    }

    const option = {
    title: {
      text: `招标金额占比`,
      top: '16%',
      left: '8%',
      textStyle: {
        fontSize: 16,
        fontWeight: 'default',
        rich: {
          colorBlock: {
            width: 16,
            height: 16,
            backgroundColor: '#409EFF',
            borderRadius: 2,
            marginRight: 8
          }
        }
      }
    },
    tooltip: {
      show: false
    },
    legend: {
      orient: 'vertical', // 改为纵向布局（一行一个）
      top: '30%', // 调整顶部距离，避免与标题重叠
      left: '8%', // 居左显示
      icon: 'circle',
      itemWidth: 15,
      itemHeight: 15,
      itemGap: 15, // 增加纵向间距
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    series: [{
      name: 'Access From',
      type: 'pie',
      radius: '75%',
      center: ['73%', '50%'], // 饼图右移，给左侧图例留出空间
      data: [
        { value: props.poaData[0].tenderAmout1, name: '200万以下 (' + (props.poaData[0].tenderAmout1/(props.poaData[0].tenderCount == 0 ? 1 : props.poaData[0].tenderCount) * 100).toFixed(0) + '％)' },
        { value: props.poaData[0].tenderAmout2, name: '500万至1000万 (' + (props.poaData[0].tenderAmout2/(props.poaData[0].tenderCount == 0 ? 1 : props.poaData[0].tenderCount) * 100).toFixed(0) + '％)' },
        { value: props.poaData[0].tenderAmout3, name: '200万至500万 (' + (props.poaData[0].tenderAmout3/(props.poaData[0].tenderCount == 0 ? 1 : props.poaData[0].tenderCount) * 100).toFixed(0) + '％)' },
        { value: props.poaData[0].tenderAmout4, name: '1000万以上 (' + (props.poaData[0].tenderAmout4/(props.poaData[0].tenderCount == 0 ? 1 : props.poaData[0].tenderCount) * 100).toFixed(0) + '％)' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        show: false, // 显示标签
        position: 'right', // 标签在饼图右侧
        align: 'left', // 文字左对齐
        fontSize: 12
      },
      labelLine: {
        show: false, // 显示连接线
        length: 15, // 连接线长度
        length2: 20 // 二级连接线长度
      },
      itemStyle: {
        color: function (params:any) {
          const colorList = [
            'rgba(0, 128, 255, 1)',
            'rgba(88, 165, 92, 1)',
            'rgba(243, 115, 22, 1)',
            'rgba(242, 189, 66, 1)'
          ];
          return colorList[params.dataIndex];
        },
        borderRadius: 3,
        borderColor: '#fff',
        borderWidth: 0
      }
    }]
  };

  myChart.setOption(option);
  });
};

// 如果 data 是异步的，监听变化
watch(() => props.poaData, () => {
  console.log('poaData-----------------', props.poaData);
  renderChart();
}, { deep: true });

onMounted(() => {
  renderChart();
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 组件卸载时移除事件监听和销毁图表实例
  window.removeEventListener('resize', handleResize);
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});

</script>
<style lang="scss" scoped></style>
